<div class="bjui-pageContent tableContent" id="div1">
    <table>
        <div style="height: 50px;text-align: center;font-size:30px;color: #101010 ">车间月度指标达成情况</div>
        <div id="merge1" style="width:50%;height:500px;float:left;border: none" ></div>
        <div id="merge2" style="width:50%;height:500px;float:left;border: none" ></div>
        <div style="width:100%;height:40px;float:left;"></div>
        <div id="merge4" style="width:50%;height:500px;float:left;border: none" ></div>
        <div id="merge3" style="width:50%;height:500px;float:left;border: none" ></div>

        <script  src="${request.getContextPath()}/js/echarts/echarts.js"></script>
        <script  src="${request.getContextPath()}/js/echarts/echarts-tool.js"></script>
        <g:if test="${outputrpt.size()>0}">
            <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var contextPath = "${request.getContextPath()}";
                eChartsTool.init(contextPath);
                var data=[];
                <g:each in="${outputrpt}" status="i" var="tableInstance">
                data.push('${tableInstance.TIME}')
                </g:each>

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '产能看板',
                        x:'center',
                        textStyle:{fontSize:30}
                    },
                    tooltip: {},
                    legend: {
                        data:['目标产能','实际产能','累计目标产能','累计实际产能'],
                        y:'bottom',
                        textStyle:{fontSize:18}

                    },
                    xAxis: {
                        "axisLabel":{
                            "interval":0,
                            "rotate":45,
                            textStyle:{fontSize:13}
                        },
                        data:data

                    },
                    yAxis : [
                        {
                            type : 'value',
                            name:'',
                            axisLabel : {
                                formatter: '{value}',
                                textStyle:{fontSize:20}
                            },
                            show:true
                        },
                        {
                            type : 'value',
                            name:'',

                            axisLabel : {
                                formatter: '{value}',
                                textStyle:{fontSize:20}
                            },
                            show:true
                        }
                    ],
                    series: [{
                        name: '目标产能',
                        type: 'bar',
                        barGap:'0%',
                        data: ${outputrpt.TARGET_OUTPUT},
                        itemStyle:{
                            normal:{
                                color:'#3366CC'
                            }
                        },

                    },
                        {
                            name: '实际产能',
                            type: 'bar',
                            barGap:'0%',
                            data: ${outputrpt.ACTUAL_OUTPUT},
                            itemStyle:{
                                normal:{
                                    color:'#FFD306'
                                }
                            },
                        },
                        {
                            name: '累计目标产能',
                            type: 'line',
                            data: ${list3},
                            itemStyle:{
                                normal:{
                                    color:'#000000'
                                }
                            },
                            yAxisIndex: 1
                        },
                        {
                            name: '累计实际产能',
                            type: 'line',
                            data: ${list1},
                            itemStyle:{
                                normal:{
                                    color:'#EA0000'
                                }
                            },
                            yAxisIndex: 1
                        }]
                };

                // 使用刚指定的配置项和数据显示图表。
                eChartsTool.setOption("macarons", document.getElementById('merge1'), option);

            </script>
        </g:if>
        <g:if test="${outqtyrpt.size()>0}">
            <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var contextPath = "${request.getContextPath()}";
                eChartsTool.init(contextPath);
                var data=[];
                <g:each in="${outqtyrpt}" status="i" var="tableInstance">
                data.push('${tableInstance.TIME}')
                </g:each>

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '功率看板',
                        x:'center',
                        textStyle:{fontSize:30}
                    },
                    tooltip: {},
                    legend: {
                        data:['目标功率','实际功率'],
                        y:'bottom',
                        textStyle:{fontSize:18}

                    },
                    xAxis: {
                        "axisLabel":{
                            "interval":0,
                            "rotate":45,
                            textStyle:{fontSize:13}
                        },
                        data:data

                    },
                    yAxis : [
                        {
                            type : 'value',
                            name:'',
                            min:280,
                            max:350,
                            axisLabel : {
                                formatter: '{value}',
                                textStyle:{fontSize:25}
                            },
                            show:true
                        },
                        {
                            type : 'value',
                            name:'',
                            min:280,
                            max:350,
                            axisLabel : {
                                formatter: '{value}',
                                textStyle:{fontSize:25}
                            },
                            show:true
                        }
                    ],
                    series: [{
                        name: '目标功率',
                        type: 'line',
                        barGap:'0%',
                        itemStyle:{
                            normal:{
                                color:'#EA0000'
                            }
                        },
                        data: ${outqtyrpt.OUT_QTY}
                    },

                        {
                            name: '实际功率',
                            type: 'bar',
                            itemStyle:{
                                normal:{
                                    color:'#FFD306'
                                }
                            },
                            data: ${outqtyrpt.TOTAL_ACTUAL_OUTPUT},
                            yAxisIndex: 1
                        }]
                };

                // 使用刚指定的配置项和数据显示图表。
                eChartsTool.setOption("macarons", document.getElementById('merge2'), option);

            </script>
        </g:if>
    </table>
    <table>
        <div id="chiptrend" style="width:100%;height:80%;" ></div>
        <script  src="${request.getContextPath()}/js/echarts/echarts.js"></script>
        <script  src="${request.getContextPath()}/js/echarts/echarts-tool.js"></script>
        <g:if test="${chiptrendrpt.size()>0}">
            <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var contextPath = "${request.getContextPath()}";
                eChartsTool.init(contextPath);
                var data=[];
                <g:each in="${chiptrendrpt}" status="i" var="tableInstance">
                data.push('${tableInstance.TIME}')
                </g:each>

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '碎片率趋势看板',
                        x:'center',
                        textStyle:{fontSize:30}
                    },
                    tooltip: {},
                    legend: {
                        data:['碎片率(%)','目标碎片率(%)'],
                        y:'bottom',
                        textStyle:{fontSize:18}

                    },
                    xAxis: {
                        "axisLabel":{
                            "interval":0,
                            "rotate":45,
                            textStyle:{fontSize:13}
                        },
                        data:data

                    },
                    yAxis : [
                        {
                            type : 'value',
                            name:'',
                            textStyle:{fontSize:25},
                            axisLabel : {
                                formatter: '{value}%',
                                textStyle:{fontSize:25}
                            },
                            show:true
                        }
                    ],
                    series: [{
                        name: '碎片率(%)',
                        type: 'bar',
                        data: ${chiptrendrpt.CHIP_YIELD},
                        itemStyle:{
                            normal:{
                                color:'#FFD306'
                            }
                        }
                    },

                        {
                            name: '目标碎片率(%)',
                            type: 'line',
                            data: ${chiptrendrpt.TARGET_CHIP_YIELD},
                            itemStyle:{
                                normal:{
                                    color:'#EA0000'
                                }
                            }
                        }]
                };

                // 使用刚指定的配置项和数据显示图表。
                eChartsTool.setOption("macarons", document.getElementById('merge3'), option);

            </script>
        </g:if>
        <g:if test="${yieldtrendrpt.size()>0}">
            <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var contextPath = "${request.getContextPath()}";
                eChartsTool.init(contextPath);
                var data=[];
                <g:each in="${yieldtrendrpt}" status="i" var="tableInstance">
                data.push('${tableInstance.TIME}')
                </g:each>

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '良率趋势看板',
                        x:'center',
                        textStyle:{fontSize:30}
                    },
                    tooltip: {},
                    legend: {
                        data:['良率(%)','目标良率(%)'],
                        y:'bottom',
                        textStyle:{fontSize:18}

                    },
                    xAxis: {
                        "axisLabel":{
                            "interval":0,
                            "rotate":45,
                            textStyle:{fontSize:13}
                        },
                        data:data

                    },
                    yAxis : [
                        {
                            type : 'value',
                            name:'',
                            textStyle:{fontSize:25},
                            min:85,
                            max:100,
                            axisLabel : {
                                formatter: '{value}%',
                                textStyle:{fontSize:25}
                            },
                            show:true
                        }
                    ],
                    series: [{
                        name: '良率(%)',
                        type: 'bar',
                        data: ${yieldtrendrpt.ACTUAL_YIELD},
                        itemStyle:{
                            normal:{
                                color:'#FFD306'
                            }
                        },

                    },

                        {
                            name: '目标良率(%)',
                            type: 'line',
                            data: ${yieldtrendrpt.TARGET_YIELD},
                            itemStyle:{
                                normal:{
                                    color:'#EA0000'
                                }
                            },

                        }]
                };

                // 使用刚指定的配置项和数据显示图表。
                eChartsTool.setOption("macarons", document.getElementById('merge4'), option);

            </script>

        </g:if>
    </table>
    <form id="pagerForm1" data-toggle="ajaxsearch" action="${request.getContextPath()}/merge/merge" method="post">
        <button style="VISIBILITY: hidden" id="auto" type="submit" class="btn-default" data-icon="search" >下一页</button>&nbsp;
    </form>
</div>